<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑医院简介</title>
    <link  href="../../images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/editor/summernote.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../../css/sweetalert.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="../../css/public.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../../css/messages_intro_in.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/skin/${user.skin}/css/left_menu.css?cache=<%=Math.random()%>"/>
    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/css/editor/summernote.js"></script>
</head>
<body>
<%@ include file="../../header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="../../left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">

        <div class="message_right_cont_box">
            <!--右边导航下面内容-->
            <div class="message_right_cont_container" id="edit_introduction">
                <input type="hidden" name="act" value="update"/>
                <input type="hidden" name="head_image" value="=head_img"/>
                <div class="message_upload">
                    <!--左边图片上传-->
                    <div class="message_upload_img">
                        <input class="message_upload_input file_container" type="file" >
                        <div class="up_load_img" id="head_img">
                            <img :src="detail.head_image" alt="">
                        </div>
                        <div class="message_upload_img_hover">
                            <img src="/images/photo.png" alt="">
                            <p class="img-tip">上传的图片不要大于2M,建议上传460*270的尺寸</p>
                        </div>
                    </div>
                    <!--右边内容修改-->
                    <div class="message_edit">
                        <ul class="input-list">
                            <li class="clearfix">
                                <label>医院名称：</label>
                                <div class="message_edit_input">
                                    <input class='H_name' name="name" v-model="detail.name"  type="text">
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>医院级别：</label>
                                <div class="message_edit_input">
                                    <input  class='H_level'  v-model="detail.level" placeholder="如：三级甲等" value="level"  maxlength="20" encodeflg="1" >
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>医院电话：</label>
                                <div class="message_edit_input">
                                    <input   class='H_tel' name="phone" placeholder="如：XXXX-XXXXXXXX,XXXX-XXXXXXXX"  v-model="detail.phone" type="text"  encodeflg="1" >
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>医院地址：</label>
                                <div class="message_edit_input">
                                    <input class='H_add'  v-model="detail.address" placeholder="如：XX省XX市XX区XX街道" value="address"  type="text"  maxlength="50" encodeflg="1">
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>访问地址：</label>
                                <div class="message_edit_input">
                                    <input  class='H_url'  v-model="detail.url" placeholder="如：https://www.baidu.com/" value="url"  type="text"  maxlength="50" encodeflg="1">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--下方医院介绍修改-->
                <div class="desc-cont clearfix">
                    <p class="tlt">医院介绍：<span class="ui-c-gray">(限输入2000个字，其中包含换行、空格及标点符号在内)</span></p>
                    <div style="width:900px;">
                        <div id="editor" ></div>
                    </div>
                </div>
                <div class="message_save_giveup">
                    <span class="message_giveup span_give_up" @click="give_up()">放弃</span>
                    <button class="message_save" @click="submit()">保存</button>

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <script src="../../js/sweetalert-dev.js"></script>
    <script>
        new Vue({
            el: "#edit_introduction",
            data: {
                detail: [],
            },
            ready: function() {
                var self=this;
                $('.message_upload_img_hover').hide();
                $('.message_upload_img').mouseenter(
                    function(){
                        $('.message_upload_img_hover').show()
                    }
                );
                $('.message_upload_img').mouseleave(
                    function(){
                        $('.message_upload_img_hover').hide()
                    }
                )
                $(document).ready(function() {
                    $('#editor').summernote({
                        height:300,
                        lang:'zh-CN',
                        callbacks: {
                            onImageUpload: function(files) {
                                // upload image to server and create imgNode...
                                var img = localImg(files[0]);
                            }
                        }
                    });
                });
                function localImg(file) {
                    var xmlhttprequest;
                    var form = new FormData();
                    form.append("file", file);
                    if (window.XMLHttpRequest) {
                        xmlhttprequest = new XMLHttpRequest();
                        if (xmlhttprequest.overrideMimeType) {
                            xmlhttprequest.overrideMimeType("text/xml");
                        }
                    }
                    xmlhttprequest.open("POST", "http://cloud.eeesys.com/pu/upload.php", true);
                    xmlhttprequest.onreadystatechange = callback.bind(this);
                    xmlhttprequest.send(form);
                    function callback() {
                        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                            var res = JSON.parse(xmlhttprequest.responseText);
                            if (res.errcode == 0) {
                                $('#editor').summernote('insertImage', res.img);
                            } else {
                                swal({
                                    txt: decodeURI(res.errmsg),
                                    title: "",
                                });
                            }
                        }
                    }
                };
                var img_url="";
                $('.message_upload_img input').change(function(e){
                    <%--图片预览--%>
                    UpladFile(e.target);
                    var file=e.target.files[0]
                    var img=new Image();
                    img.src=URL.createObjectURL(file);
                    var url=img.src;
                    var $img=$(img);
                    img.onload=function(){
                        URL.revokeObjectURL(url);
                        $('.up_load_img').empty().append($img);
                    }
                })
                <%--上传文件--%>
                function UpladFile(obj) {
                    var objVal = $(obj).val();
                    var name = objVal.split("\\")[2];
                    var tail = name.split(".")[1];
                    if(tail=="jpg"||tail=="png"||tail=="jpeg"){
                        var fileObj = obj.files[0]; 						// js 获取文件对象
                        var FileController = "http://cloud.eeesys.com/pu/upload.php";                    // 接收上传文件的后台地址
                        // FormData 对象
                        var form = new FormData();
                        form.append("author", "hooyes");                    // 可以增加表单数据
                        form.append("act", "file");                    // 可以增加表单数据
                        form.append("file", fileObj);                       // 文件对象
                        // XMLHttpRequest 对象
                        var xhr = new XMLHttpRequest();
                        xhr.open("post", FileController, true);
                        xhr.onload = function (res) {
                            var rr = JSON.parse(xhr.responseText);
                            var timestamp = Date.parse(new Date()) + "";
                            img_url=rr.url
                            self.detail.head_image = img_url;
                            //console.log(img_url);
                        };
                        xhr.send(form);
                        return img_url;
                    }
                    else{
                        $(obj).val('');
                        swal("只支持jpg和png的图片格式");
                        return;
                    }
                }

                $.ajax({
                    type: 'POST',
                    url: "see.jsp",
                    data:{
                        act:'show_hospital',
                        hospital: "${user.hospital}",
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            self.detail = res.data;
                            var sHTML = decodeURI(self.detail.introduction);
                            $('.note-editable').html(sHTML) ;
                        } else {
                            swal(res.errmsg);
                        }
                    }.bind(this),
                });
            },
            methods: {
                give_up: function() {
                    locationHerf("see");
                },
                submit:function(){
                    var self = this;
                    var hos_name=self.detail.name;
                    if(!hos_name || hos_name.trim()==""){
                        swal('医院名称不能为空')
                    }else if(hos_name.length>20){
                        swal('医院名称不能大于20字')
                    }else{
                        var sHTML = $('.note-editable').html();
                        $.ajax({
                            type: 'POST',
                            url: "edit.jsp",
                            data: {
                                act: "update_hospital",
                                hospital: "${user.hospital}",
                                name:self.detail.name,
                                level:self.detail.level,
                                phone:self.detail.phone,
                                address:self.detail.address,
                                url:self.detail.url,
                                introduction:encodeURI(sHTML.replace(/"/g, "'")),
                                head_image:self.detail.head_image

                            },
                            success: function(res) {
                                res = JSON.parse(res);
                                if (res.errcode == 0) {
                                    location.href="see.jsp";
                                } else {
                                    swal("修改未成功");
                                }
                            },
                        });

                    }

                }
            },
        });
    </script>
</body>
</html>
